import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Controls from '#cpt/temp/Controls'
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
import Confirm from '#cpt/temp/Confirm'
import Cols from '#private/cols'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== private template
const Box 				= $Lazy.load(()=>import('#tp/box/box'))
const Select 			= $Lazy.load(()=>import('@antd/form/select'))
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const confirm 			= $Lazy.file(()=>import('@antd/confirm'))
// const PreviewImage 		= $Lazy.state(()=>import('#private/pages/preview-image'))
const AddDicModal 		= $Lazy.state(()=>import('./add-dic-modal'))
const ControlModal 		= $Lazy.state(()=>import('./control-modal'))
// ===================================================================== data
const proStatus = [ { name: "已审核", value: "1" },{ name: "待审核", value: "0" },{ name: "待保存", value: "-2" }]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		formData: [
			{ label: '医院名称',	name: 'hosp_name', 			full:true, 		disabled: true,	p:' '},
			{ label: '条码号',			name: 'spec_code',  	    full:true,		disabled: true,	p:' ',	itemClassName:'doubleInProSpec'},
			{ label: '选择项目',			name: 'project_id',  		full:true, 	type: 'select-table', isKeydown: 'kind',	loading:true, disabled: true,cols:Cols['specimenkindSelect'],	onValue:({value})=>{this.addProject(value)}},
		],
		specData:[]
	}
	
	componentDidMount(){
		this.getSelect()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		
		$cache.then( async f => {
			// 选择项目
			$fn.setRow( formData, 'project_id', await f.getCache({ api:'specimenkindSelect' }) )
			// 标本类型
			const specType = $fn.setRow( this.cols, 'spec_type', await f.getDicCache({ code: 2000, refresh:true }) )
			
			this.setState({ formData, specType })
		})
	}
	// 获取标本类型
	getSpecType = () => {
		$cache.then( async f => {
			// 标本类型
			const specType = $fn.setRow( this.cols, 'spec_type', await f.getDicCache({ code: 2000, refresh:true }) )
			this.setState({ specType })
		})
	}
	
	fetch = () => {
		const { uuid, spec_code } = this.props.specData
		$http.pull(this,'specimen-kind-record/index', { param:{spec_id:uuid,spec_code,double_status:this.props.status} })
	}
	// 添加项目
	addProject = value => {
		const {uuid,spec_code} = this.props.specData
		$http.submit(null,'specimen-kind/batchadd',{ param:{ kind_ids:[value], spec_id:uuid,spec_code,double_status:this.props.status}, loadingText:`添加中`}).then(data=>{
			$fn.msg.success('添加成功')
			this.props.refreshProject()
			this.formRef.reset(['project_id'])
		}).catch(() => {
			this.formRef.reset(['project_id'])
		})
	}
	clear = () => {
		this.setState({data:[]})
	}
	
	cols=[
		{ title: '项目代码', 	dataIndex: 'kind_code',				width:80,	 },
		{ title: '项目名称', 	dataIndex: 'kind_name', 			width:150 },
		{ title: '岗位 ', 		dataIndex: 'project_name',  		width:120,  },
		{ title: '标本类型 ', 	dataIndex: 'spec_type_name', 		width:150,	name:'spec_type', 	render: (text, {uuid}) => {
			return <Select
				name		= 'spec_type'
				value		= {text}  
				data		= {this.state.specType}
				width		= '100%' 
				outer
				tipTxt		= ' '
				onChange 	= { value  =>{
					const { specType } = this.state
					confirm.then(f=>{
						const spec_type = value ? specType[value].code : ''
						$http.submit(null,'specimen-kind/savespectype',{ param:{spec_type:spec_type,uuid,double_status:this.props.status}, loadingText:`添加中`}).then(data=>{
							$fn.msg.success(`操作成功`)
							this.fetch()
						})
					})
				}}
			/>
		}},
		{ title: '项目属性 ', 	dataIndex: 'kind_type_name',  		width:120,  },
		{ title: '项目类别 ', 	dataIndex: 'category_name',  		width:90,  },
		// { title: '子项目 ', 		dataIndex: 'child_kind_name',  		width:300,  },
		{ title: '项目状态 ', 	dataIndex: 'enabled',  				width:80,	render: text => $fn.getState(proStatus,text)  },
		
		TableControls.controls.call(this,{ width: 100 })
	]	
	// 表格操作按钮
	table_controls = ({uuid,spec_id,enabled}) => {
		return [
			TableControls.click.call(this, '添加', ()=>{
				this.addDicModal.open()
			}),
			+enabled !== 1?Confirm.call(this, '删除', 'specimen-kind-record/del',{
				query:{uuid},
				onOk:()=> {this.props.refreshProject()}
			}):null,	// 删除
		]
	}
	
	controls = () => {
		const {spec_code} = this.props.specData
		return [
			Controls.submit.call(this,'以此为准', 'specimen-kind-record/finish',{
				param: {spec_code,double_status:this.props.status},
				onOk: () => {
					this.props.onRefresh()
					this.props.clear()
				},
				disabled: !$fn.hasObject(this.props.specData)
			}),
			// 新增查看自然项目 2022年12月9日15:57:25 敖得卓
			Controls.click.call(this, '查看自然项目', () => this.modal.open({spec_code}, this.props.status),{ disabled: !$fn.hasObject(this.props.specData) } ),
			// Controls.click.call(this, '查看图片', ()=>{
			// 	this.previewRef.open(this.props.specData.image)
			// },{ disabled: !this.props.specData.image } ),
		]
	}
	
	reset = () => this.formRef?.reset()
	
	render(){
		const { formData, data } = this.state
		return (
			<>
				<Box title={this.props.title} full className='mr10 h' contentClassName='mt10 fv' flex controls={this.controls()} >
					<div>
						<div className='mb5 fx'><span style={{width: 60}} className='tr mr15'>录入人：</span>{ data.length ? data[data.length - 1]?.operator_name : ''}</div>
						{ SubmitForm.call(this,{ data:formData, labelWidth:'s4', noholder:true, contentClassName:'proForm'} ) }
					</div>
					<div className='ex fx'>
						{Table.call(this,{
							onRowClass: ({is_same}) => {
								return +is_same === 0 ? 'row-fb8787' : null
							}
						})}
					</div>
				</Box>
				{/* 添加字典 */}
				<AddDicModal onRef = { ref => this.addDicModal = ref } onRefresh = {this.getSpecType} />
				{/*<PreviewImage onRef = { ref => this.previewRef = ref } />*/}
				<ControlModal onRef={ref=>this.modal=ref} />
			</>
		)
	}
}

export default Index